<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <base th:href="@{/}">
    <title>日记展示</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/index/diary_show/styles.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/lazyload_img.css}">
    <style>
        #title {
            text-align: center;
        }
    </style>
</head>
<body class="scroll-con">
<main>
    <header>
        <h1 id="title"></h1>
    </header>
    <section id="article">
    </section>
</main>
<canvas id="map"></canvas>

<script type="application/javascript" th:src="@{/bootstrap/index/diary_show/pagemap.min.js}"></script>
<script type="text/javascript" th:src="@{https://lib.baomitu.com/jquery/3.5.0/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/layopen.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/JSONUtil.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/AjaxUtil.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/lazyload_img.js}"></script>
<script>
    window.onload = function () {

        initializedArticle();

        function initializedArticle() {
            let test = window.location.href;
            let ring = test.split("?key=");
            if (ring.length === 2) {
                ajaxPost('article/loadArticle', {articleKey: ring[1]}, function () {
                }, function (result) {
                    if (result.code + '' === '200') {
                        let data = result.data;
                        $('#title').text(data.title);
                        let content = data.content;
                        let newC = content.replace(/<img src/g, "<img class='scroll-con-img' data-src");
                        $('#article').empty().html(newC);
                        pagemap(document.querySelector('#map'));
                        let allImgs = document.querySelectorAll('.scroll-con-img');
                        allImgs.forEach(lazyLoad);
                    } else {
                        layer.msg(result.message, {icon: 0});
                    }
                }, function () {
                    layer.msg('服务器好像出了问题, 加载数据出错', {icon: 0});
                });
            }
        }

    }
</script>
</body>
</html>